<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleReturn">返回</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详情',
                icon: 'clarity:info-standard-line',
                onClick: handleDesc.bind(null, record),
              },
              {
                label: '评分',
                icon: 'clarity:note-edit-line',
                onClick: handleScore.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <ScoreEdit @register="registerScoreModal" />
    <TeachingRecordDesc @register="registerDescModal" />
  </div>
</template>
<script lang="ts" setup>
  import { TeachingRecordModel } from "/@/api/model/practicalModel";
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import TeachingRecordDesc from "./TeachingRecordDesc.vue";
  import ScoreEdit from "./ScoreEdit.vue";
  import { useModal } from "/@/components/Modal";
  import { useRoute, useRouter } from "vue-router";
  import { useTabs } from "/@/hooks/web/useTabs";
  import { teachingRecordBasicColumns } from "/@/views/default/practical/practical.data";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import {
    getTeachingRecordPageByIdApi,
    getTeachingRecordScoreApi,
  } from "/@/api/core/teachingRecord";
  import { PracTypeEnum } from "/@/enums/typeEnum";

  const route = useRoute();
  const router = useRouter();
  const { userId, userName } = route.query;

  const [registerTable, { setLoading }] = useTable({
    title: `${userName}的课堂教学记录`,
    api: getTeachingRecordPageByIdApi,
    beforeFetch(params) {
      return { ...params, userId };
    },
    columns: teachingRecordBasicColumns,
    ...defaultTableSettings,
    actionColumn: {
      width: 240,
      ...defaultActionColumn,
    },
    rowKey: "recordId",
  });

  const { closeCurrent } = useTabs();

  function handleReturn() {
    closeCurrent();
    router.back();
  }

  const [registerDescModal, { openModal: openDescModal }] = useModal();
  const [registerScoreModal, { openModal: openScoreModal }] = useModal();

  function handleDesc(record: TeachingRecordModel) {
    openDescModal(true, { ...record, userId });
  }

  async function handleScore(record) {
    setLoading(true);
    const score = await getTeachingRecordScoreApi(userId as unknown as number, record.recordId);
    openScoreModal(true, {
      score,
      target: PracTypeEnum.TeachingRecord,
      params: { userId, recordId: record.recordId },
    });
    setLoading(false);
  }
</script>
